<template>
  <Top-Page class="detail-box">
    <cu-custom bgColor="bg-white" :isBack="true">
      <template #backText></template>
      <template #content>个人信息</template>
    </cu-custom>
    <view class="padding flex justify-start align-center">
      <user-avator :width="112" :height="112" :src="detail.avatar + '?imageView2/1/w/100/h/100/q/50'"></user-avator>
      <view class="im-flex im-justify-content-start im-columns ml-26">
        <view class="mb-5 mb-20">
          {{ detail.realname }}
          <view class="level-icon-wrap" v-if="detail.level?.icon">
            <image class="level-icon" :src="detail.level?.icon" mode="widthFix"></image>
            {{ detail.level?.name }}
          </view>
        </view>
        <!-- <view class="text-gray">{{ $util.maskPhoneNumber(detail.account) }}</view> -->
        <view class="text-gray">{{ detail.account_num ?? "" }}</view>
      </view>
    </view>
    <view class="cu-list menu">
      <!-- <view class="cu-item">
        <view class="content">
          <text>畅了号</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">{{ detail.account_num ?? '暂无' }}</text>
        </view>
      </view> -->
      <view
        class="cu-item"
        v-if="
          globalConfig.sysInfo?.runMode == 2 &&
          detail.friend &&
          userInfo.user_id != detail.user_id &&
          detail.friend.nickname
        "
        @tap="setNickname('备注信息')"
      >
        <view class="content">
          <!-- <text class="cuIcon-edit text-green"></text> -->
          <text>备注</text>
        </view>
        <view class="action flex items-center">
          <text class="text-grey text-sm">
            {{ detail.friend.nickname || "未设置" }}
          </text>
          <image class="w-32 ml-16" src="/static/image/common/edit.png" mode="widthFix"></image>
        </view>
      </view>
      <view
        class="cu-item"
        v-if="
          globalConfig.sysInfo?.runMode == 2 &&
          detail.friend &&
          userInfo.user_id != detail.user_id &&
          detail.friend.searchname
        "
        @tap="setNickname('搜索备注')"
      >
        <view class="content">
          <!-- <text class="cuIcon-edit text-green"></text> -->
          <text>搜索备注</text>
        </view>
        <view class="action flex items-center">
          <text class="text-grey text-sm">
            {{ detail.friend.searchname || "未设置" }}
          </text>
          <image class="w-32 ml-16" src="/static/image/common/edit.png" mode="widthFix"></image>
        </view>
      </view>
      <view class="cu-item" v-if="detail.email">
        <view class="content">
          <!-- <text class="cuIcon-mail text-green"></text> -->
          <text>邮箱</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">
            {{ detail.email}}
          </text>
        </view>
      </view>

      <!-- <view class="cu-item">
				<view class="content">
					<text>年龄</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{ detail.age }}</text>
				</view>
			</view> -->

      <view class="cu-item">
        <view class="content">
          <!-- <text class="cuIcon-safe text-green"></text> -->
          <text>性别</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">{{ sex(detail.sex) }}</text>
        </view>
      </view>

      <view class="cu-item" v-if="detail.user_show_data?.user_name">
        <view class="content">
          <!-- <text class="cuIcon-safe text-green"></text> -->
          <text>实名</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">{{ detail.user_name || "--" }}</text>
        </view>
      </view>

      <view class="cu-item" v-if="detail.user_show_data?.identity">
        <view class="content">
          <!-- <text class="cuIcon-safe text-green"></text> -->
          <text>身份证</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">{{ detail.identity || "--" }}</text>
        </view>
      </view>

      <view class="cu-item" v-if="detail.user_show_data?.identity_address">
        <view class="content">
          <!-- <text class="cuIcon-safe text-green"></text> -->
          <text>身份证住址</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">
            {{ detail.identity_address || "--" }}
          </text>
        </view>
      </view>

      <view class="cu-item" v-if="detail.user_show_data?.address">
        <view class="content">
          <!-- <text class="cuIcon-safe text-green"></text> -->
          <text>现住址</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">
            {{ detail.province }}{{ detail.city }}{{ detail.area
            }}{{ detail.province && detail.city && detail.area ? "" : "--" }}
          </text>
        </view>
      </view>

      <view class="cu-item" v-if="detail.user_show_data?.address">
        <view class="content">
          <!-- <text class="cuIcon-safe text-green"></text> -->
          <text>详细地址</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">{{ detail.address || "--" }}</text>
        </view>
      </view>

      <view class="cu-item" v-if="detail.user_show_data?.school">
        <view class="content">
          <!-- <text class="cuIcon-safe text-green"></text> -->
          <text>学校</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">{{ detail.school || "--" }}</text>
        </view>
      </view>

      <!-- <view class="cu-item" v-if="detail.user_show_data.friends">
        <view class="content">
          <text>熟悉的朋友</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">{{ detail.friends || '--' }}</text>
        </view>
      </view> -->

      <view class="cu-item" v-if="detail.user_show_data?.good_at">
        <view class="content">
          <!-- <text class="cuIcon-safe text-green"></text> -->
          <text>技能</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">{{ detail.good_at || "- -" }}</text>
        </view>
      </view>

      <view class="cu-item" v-if="detail.user_show_data?.hobby">
        <view class="content">
          <!-- <text class="cuIcon-safe text-green"></text> -->
          <text>爱好</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">{{ detail.hobby || "- -" }}</text>
        </view>
      </view>
      <view class="cu-item" v-if="detail.user_show_data?.work_experience">
        <view class="content">
          <!-- <text class="cuIcon-safe text-green"></text> -->
          <text>工作经历</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">
            {{ detail.work_experience || "- -" }}
          </text>
        </view>
      </view>

      <view
        class="cu-item"
        style="flex-direction: column; align-items: flex-start"
        v-if="detail.user_show_data?.lived_address"
      >
        <view class="content">
          <text>曾经住过的地址</text>
        </view>
        <view class="">
          <view class="action mt-15" v-for="item in detail.lived_address?.split('#')" :key="item">
            <text class="text-grey text-sm">{{ item }}</text>
          </view>
        </view>
      </view>
      <view
        class="cu-item"
        style="flex-direction: column; align-items: flex-start"
        v-if="detail.user_show_data?.previous_employer"
      >
        <view class="content">
          <text>曾工作单位</text>
        </view>
        <view class="">
          <view class="action mt-15" v-for="item in detail.previous_employer?.split('#')" :key="item">
            <text class="text-grey text-sm">{{ item }}</text>
          </view>
        </view>
      </view>
      <view
        class="cu-item"
        style="flex-direction: column; align-items: flex-start"
        v-if="detail.user_show_data?.attended_schools"
      >
        <view class="content">
          <text>曾就读过的学校</text>
        </view>
        <view class="">
          <view class="action mt-15" v-for="item in detail.attended_schools?.split('#')" :key="item">
            <text class="text-grey text-sm">{{ item }}</text>
          </view>
        </view>
      </view>
      <view
        class="cu-item"
        style="flex-direction: column; align-items: flex-start"
        v-if="detail.user_show_data?.mem_family_friends"
      >
        <view class="content">
          <text>记忆的家人或朋友</text>
        </view>
        <view class="">
          <view class="action mt-15" v-for="item in detail.mem_family_friends?.split('#')" :key="item">
            <text class="text-grey text-sm">{{ item }}</text>
          </view>
        </view>
      </view>
      <view class="cu-item" v-if="detail.user_show_data?.skills_learned">
        <view class="content">
          <text>学过的技能</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">
            {{ detail.skills_learned || "- -" }}
          </text>
        </view>
      </view>
      <view class="cu-item" v-if="detail.user_show_data?.favorite_brand">
        <view class="content">
          <text>喜欢的品牌</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">
            {{ detail.favorite_brand || "- -" }}
          </text>
        </view>
      </view>

      <view class="cu-item">
        <view class="content">
          <!-- <text class="cuIcon-safe text-green"></text> -->
          <text>个性签名</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">{{ detail.motto || "- -" }}</text>
        </view>
      </view>

      <view class="cu-item" v-if="detail.user_show_data?.take_address">
        <view class="content">
          <!-- <text class="cuIcon-safe text-green"></text> -->
          <text>收货地址</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">
            {{ detail.take_address || "- -" }}
          </text>
        </view>
      </view>

      <!-- <view class="cu-item" v-if="detail.user_show_data.employment_log">
        <view class="content">
          <text>创业就业经历</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">
            {{ detail.employment_log || '- -' }}
          </text>
        </view>
      </view> -->

      <view class="cu-item" v-if="detail.user_show_data.speciality">
        <view class="content">
          <!-- <text class="cuIcon-safe text-green"></text> -->
          <text>特长专长</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm">
            {{ detail.speciality || "- -" }}
          </text>
        </view>
      </view>

      <view class="cu-item" v-if="detail.user_show_data.footprint">
        <view class="content">
          <!-- <text class="cuIcon-safe text-green"></text> -->
          <text>我的足迹</text>
        </view>
        <view class="action footprint" v-if="detail.footprint">
          <image
            class="footprint-img"
            v-for="(item, index) in detail.footprint"
            :src="item"
            mode="aspectFit"
            @click="previewImage(index)"
          />
        </view>
      </view>

      <view class="cu-item" v-if="parseInt(globalConfig.sysInfo.ipregion)">
        <view class="content">
          <text>IP</text>
        </view>
        <view class="action">
          <text class="text-grey text-sm" v-if="detail.last_login_ip">
            {{ detail.last_login_ip || "未知" }} （{{ detail.location || "未知" }}）
          </text>
          <text class="text-grey text-sm" v-else>未知</text>
        </view>
      </view>
    </view>

    <view class="cu-list" style="margin-top: 0">
      <view v-if="userInfo.user_id != detail.user_id" class="cu-item b-none" @click="show = true">
        <view class="flex flex-direction rmq-wrap">
          <view class="content">人脉圈权限</view>
          <view class="action arrow-left rmq-icon w-20 h-20"></view>
        </view>
      </view>
      <view class="cu-item">
        <view class="flex rmq-wrap" @click="toWorks()">
          <view class="content">人脉圈</view>
          <view class="action arrow-left rmq-icon w-20 h-20"></view>
        </view>
      </view>
    </view>
    <template class="" v-if="userInfo.user_id != detail.user_id">
      <view class="flex flex-direction" v-if="globalConfig.sysInfo?.runMode == 1 || detail.friend">
        <view class="cu-btn border-bottom-before" @tap="sendMsg(detail, '')">
          <image class="cu-btn-cion" src="/static/image/communicate/a1.png" mode="widthFix"></image>
          <view class="">发消息</view>
        </view>
        <view class="cu-btn border-bottom-before" v-if="validatePhone" @tap="callPhone()">
          <image class="cu-btn-cion" src="/static/image/communicate/a2.png" mode="widthFix"></image>
          <view class="">打电话</view>
        </view>
        <view class="cu-btn" @tap="modelName = 'callRtc'" v-if="parseInt(globalConfig.chatInfo.webrtc)">
          <image class="cu-btn-cion" src="/static/image/communicate/a3.png" mode="widthFix"></image>
          <view class="">音视频通话</view>
        </view>
      </view>

      <view class="cu-btn-wrap-2 flex-direction">
        <!-- <view class="cu-btn-1" @tap="delFriend()" v-if="globalConfig.sysInfo.runMode == 2">删除好友</view> -->
        <view class="cu-btn-1" @tap="sendMsg(detail, 'casual')" v-if="!detail.friend && group_id">临时聊天</view>

        <view class="cu-btn-1" v-if="globalConfig.sysInfo?.runMode == 2 && !detail.friend" @tap="addFriend()">
          加好友
        </view>

        <view style="border: 1rpx solid #1677ff; color: #1677ff" class="cu-btn-1" @tap="delFriend()" v-else>
          删除好友
        </view>
      </view>
    </template>
    <view class="cu-modal bottom-modal" :class="modelName == 'callRtc' ? 'show' : ''" @tap="modelName = ''">
      <view class="cu-dialog">
        <view class="manage-content">
          <view class="cu-list menu bg-white">
            <view class="cu-item" @tap="calling(0)">
              <view class="content padding-tb-sm">
                <text class="cuIcon-dianhua"></text>
                <text>语音通话</text>
              </view>
            </view>
            <view class="cu-item" @tap="calling(1)">
              <view class="content padding-tb-sm">
                <text class="cuIcon-record"></text>
                <text>视频通话</text>
              </view>
            </view>
            <view class="parting-line-5"></view>
            <view class="cu-item" @tap="modelName = ''">
              <view class="content padding-tb-sm">
                <text class="c-red">取消</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <Popup v-model:show="show" position="bottom" round class="set-popup cu-list menu">
      <view class="cu-item cu-item-1">
        <view class="content">
          <text>不让{{ detail.sex == 0 ? "她" : "他" }}看</text>
        </view>
        <view class="action">
          <switch
            class="switch"
            @change="saveSet($event, 'trends_hide_me')"
            :class="detail.friend?.trends_hide_me ? 'checked' : ''"
            :checked="detail.friend?.trends_hide_me"
          ></switch>
        </view>
      </view>

      <view class="cu-item">
        <view class="content">
          <text>不看{{ detail.sex == 0 ? "她" : "他" }}</text>
        </view>
        <view class="action">
          <switch
            class="switch"
            @change="saveSet($event, 'trends_hide_his')"
            :class="detail.friend?.trends_hide_his ? 'checked' : ''"
            :checked="detail.friend?.trends_hide_his"
          ></switch>
        </view>
      </view>
    </Popup>

    <!-- 备注信息 / 搜索备注 -->
    <Popup round v-model:show="nicknameShow" class="popup-dialog">
      <view class="show-title">{{ nicknameTitle }}</view>

      <input class="nn-inp" v-model="nnInp" :placeholder="`请输入${nicknameTitle}`" />

      <view class="nn-btns">
        <view class="nn-btn cancel" @click="nicknameCancel">取消</view>
        <view class="nn-btn confirm" @click="nicknameConfirm">确定</view>
      </view>
    </Popup>

    <!--  -->
  </Top-Page>
</template>

<script>
import Popup from "@/components/Popup/Popup.vue";
import { useMsgStore } from "@/store/message";
import { useloginStore } from "@/store/login";
import { debounce } from "@/utils/utils.js";
import pinia from "@/store/index";
const msgStore = useMsgStore(pinia);
const userStore = useloginStore(pinia);
export default {
  data() {
    return {
      nicknameShow: false,
      nicknameTitle: "",
      nnInp: "",
      id: 0,
      group_id: 0,
      show: false,
      modelName: "",
      detail: {},
      userInfo: userStore.userInfo,
      globalConfig: userStore.globalConfig,
    };
  },
  components: { Popup },
  computed: {
    validatePhone() {
      let reg = /^1[3456789]\d{9}$/;
      return reg.test(this.detail.account);
    },
  },
  onLoad(options) {
    this.id = options.id;
    this.group_id = options.group_id;
    this.getUserInfo();

    // 监听消息更新请求
    uni.$on("getPositonsOrder", (res) => {
      switch (res["type"]) {
        case "appendContact":
          this.getUserInfo();
      }
    });
  },
  methods: {
    getUserInfo() {
      this.$api.msgApi.getUserInfo({ user_id: this.id }).then((res) => {
        if (res.code == 0) {
          this.detail = res.data;
        }
      });
    },
    previewImage(index) {
      uni.previewImage({
        current: index,
        urls: this.detail.footprint,
      });
    },
    saveSet(e, type) {
      const value = e.detail.value;
      this.detail.friend[type] = value;
      const data = {
        user_id: this.detail.user_id,
        type: type,
        num: value ? 1 : 0,
      };
      this.$api.friendCircleApi.circleWatchcircle(data).then((res) => {
        console.log(res);
      });
    },
    toWorks() {
      uni.navigateTo({
        url: `/pages/friend/home/home?user_id=${this.detail.user_id}&realname=${this.detail.realname}&avatar=${this.detail.avatar}&chat_bg=${this.detail.chat_bg}`,
      });
    },
    sendMsg(info, type) {
      let str = `?id=${info.user_id}`;

      // casual -- 临时聊天
      if (type === "casual") {
        info["is_group"] = 0;
        info["id"] = info.user_id;
        str += `&type=${type}&realname=${info.realname}&group_id=${this.group_id}`;
        // msgStore.changeCasualUserInfo(info);

        let contacts = msgStore.contacts;
        let contact = this.$util.findArray(contacts, info.id);

        if (contact) {
          contact.lastContent = "";
          contact.lastSendTime = "";
          contact.type = "text";
          contact.unread += 0;
          // 更新联系人信息
          msgStore.updateContacts(contact);
        } else {
          let newContact = {
            id: info.id,
            displayName: info.realname,
            avatar: info.avatar,
            lastContent: "",
            lastSendTime: "",
            is_group: info.is_group,
            unread: 0,
            is_top: 0,
            dep_id: 0,
          };

          if (type === "casual") {
            newContact["group_id"] = this.group_id;
            console.log(this.group_id, "this.group_id");
            newContact["tempChat"] = true;
          }

          contacts.unshift(newContact);
          msgStore.initContacts(contacts);
        }

        msgStore.catchSocketAction(info);
      }

      uni.navigateTo({
        url: `/pages/message/chat?${str}`,
      });
    },
    sex(value) {
      let arr = ["女", "男", "未知"];
      return arr[value] || "未知";
    },
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: this.detail.account,
      });
    },
    calling(is_video) {
      if (msgStore.webrtcLock) {
        return uni.showToast({
          title: "其他终端正在通话中",
          icon: "none",
        });
      }
      this.modelName = "";
      let msg_id = this.$util.getUuid();
      uni.navigateTo({
        url:
          "/pages/message/call?msg_id=" +
          msg_id +
          "&type=" +
          is_video +
          "&status=1&id=" +
          this.detail.user_id +
          "&name=" +
          this.detail.realname +
          "&avatar=" +
          encodeURI(this.detail.avatar),
      });
    },
    delFriend() {
      uni.showModal({
        title: "确定要删除该好友吗？",
        success: (res) => {
          if (res.confirm) {
            let data = { id: this.detail.user_id };
            this.$api.friendApi.delFriend(data).then((res) => {
              if (res.code == 0) {
                msgStore.deleteContacts(data);
                uni.reLaunch({
                  url: "/pages/index/index",
                });
              }
            });
          }
        },
      });
    },
    addFriend() {
      // uni.showModal({
      //   title: '请输入验证信息',
      //   editable: true,
      //   success: (res) => {
      //     if (res.confirm) {
      //       if (res.content == '') {
      //         return uni.showToast({
      //           title: '请输入备注！',
      //           icon: 'error'
      //         });
      //       }
      this.$api.friendApi
        .addFriend({
          user_id: this.detail.user_id,
          remark: "" /*res.content*/,
        })
        .then((e) => {
          if (e.code == 0) {
            uni.showToast({
              title: e.msg,
              icon: "none",
            });
          }
        });
      //     }
      //   }
      // });
    },
    nicknameCancel() {
      this.nicknameTitle = "";
      this.nnInp = "";
      this.nicknameShow = !this.nicknameShow;
    },
    nicknameConfirm() {
      if (!this.nnInp) {
        uni.showToast({
          title: `请输入${this.nicknameTitle}！`,
          icon: "error",
        });

        return;
      }

      let friend_id = this.detail.friend.friend_id ?? "";

      if (!this.detail.friend) {
        return uni.showToast({
          title: "无法设置",
          icon: "error",
        });
      }

      let data = { friend_id: friend_id };
      const key = this.nicknameTitle === "备注信息" ? "nickname" : "searchname";
      const api = this.nicknameTitle === "备注信息" ? "setNickname" : "setSearchname";
      data[key] = this.nnInp;

      this.$api.friendApi[api](data).then((e) => {
        if (e.code == 0) {
          this.detail.friend[key] = this.nnInp;

          const k = this.nicknameTitle === "备注信息" ? "displayName" : "searchName";
          const updata = { id: this.detail.user_id };
          updata[k] = this.nnInp;
          msgStore.updateContacts(updata);

          this.nicknameCancel();

          uni.showToast({
            title: e.msg,
            icon: "none",
          });
        }
      });
    },
    setNickname(title) {
      this.nicknameTitle = title;
      this.nicknameShow = !this.nicknameShow;
    },
    _setNickname(id) {
      let friend_id = this.detail.friend.friend_id ?? "";
      if (!this.detail.friend) {
        return uni.showToast({
          title: "无法设置",
          icon: "error",
        });
      }
      uni.showModal({
        title: "请输入备注信息",
        editable: true,
        success: (res) => {
          if (res.confirm) {
            if (res.content == "") {
              return uni.showToast({
                title: `请输入${id === 0 ? "好友" : "搜索"}备注！`,
                icon: "error",
              });
            }

            let data = { friend_id: friend_id };
            const key = id === 0 ? "nickname" : "searchname";
            const api = id === 0 ? "setNickname" : "setSearchname";
            data[key] = res.content;

            this.$api.friendApi[api](data).then((e) => {
              if (e.code == 0) {
                this.detail.friend[key] = res.content;

                const k = id === 0 ? "displayName" : "searchName";
                const updata = { id: this.detail.user_id };
                updata[k] = res.content;
                msgStore.updateContacts(updata);

                uni.showToast({
                  title: e.msg,
                  icon: "none",
                });
              }
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.action {
  .text-grey {
    color: #727272;
  }
  .text-sm {
    font-size: calc(var(--amplified_base) * 32rpx);
    word-break: break-all;
  }
}
.detail-box {
  background-color: #fff;
  color: #0c0c0c;

  .cu-avatar {
    width: calc(var(--amplified_base) * 112rpx);
    height: calc(var(--amplified_base) * 112rpx);
    margin-left: 32rpx;
    margin-right: 24rpx;
  }

  .mb-5 {
    font-size: calc(var(--amplified_base) * 36rpx);
    line-height: calc(var(--amplified_base) * 47rpx);
    font-weight: bold;
    color: #1b1b1b;
    line-height: 1.2;
    display: flex;
    align-items: center;
  }

  .text-gray {
    color: #727272;
    font-size: calc(var(--amplified_base) * 26rpx);
  }

  .cu-list {
    margin-top: calc(var(--amplified_base) * 60rpx);
    padding-bottom: 0;
    .cu-item {
      .content {
        font-size: calc(var(--amplified_base) * 32rpx);
        line-height: 1;
      }
    }
    .b-none {
      &::after {
        content: "";
        border: none !important;
      }
    }
    .cu-item::after {
      top: 0;
      bottom: auto;
      left: calc(var(--amplified_base) * 16rpx);
      right: calc(var(--amplified_base) * 16rpx);
      border: 2rpx solid #d1d1d1;
    }
  }

  .flex-direction {
    border-top: 16rpx solid #f2f2f2;
  }

  .cu-btn {
    position: relative;
    background-color: transparent;
    height: calc(var(--amplified_base) * 100rpx);
    line-height: calc(var(--amplified_base) * 100rpx);
    font-size: calc(var(--amplified_base) * 32rpx);
    font-weight: 400;
    color: #1677ff;

    &::before {
      border: 2rpx solid #e6e6e6;
    }
  }

  .cu-dialog .cu-list {
    margin-top: 0;
  }

  .cu-btn-wrap-2 {
    // padding-top: calc(var(--amplified_base) * 40rpx);
    // padding-bottom: calc(var(--amplified_base) * 40rpx);
    background-color: #fff;
  }

  .cu-btn-1 {
    text-align: center;
    width: 100%;
    height: calc(var(--amplified_base) * 99rpx);
    line-height: calc(var(--amplified_base) * 99rpx);
    background: var(--subject-color);
    font-size: calc(var(--amplified_base) * 32rpx);
    border-bottom: 1rpx solid #ccc;
    font-weight: 600;
    letter-spacing: 2rpx;
    color: #1677ff;

    &:last-child {
      border: none;
    }
  }
}

.cu-btn-cion {
  width: calc(var(--amplified_base) * 30rpx);
  margin-right: calc(var(--amplified_base) * 10rpx);
}

.rmq-wrap {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 34rpx;
  min-height: calc(var(--amplified_base) * 100upx);
}

.rmq-icon {
  border-color: #666;
  transform: rotate(228deg);
}

:deep .set-popup {
  padding: 100rpx 0;

  .set-popup-btn-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
.cu-item-1::after {
  border: none !important;
}
.cu-list.menu > .cu-item .content {
  margin-right: 34rpx;
  flex-shrink: 0;
  flex: none;
}
.level-icon-wrap {
  display: flex;
  align-items: center;
  margin-left: 12rpx;
  color: #22436d;
  font-size: 24rpx;
  padding: 0 12rpx;

  .level-icon {
    width: 40rpx;
  }
}
.footprint-img {
  width: calc(var(--amplified_base) * 60rpx);
  height: calc(var(--amplified_base) * 60rpx);
}
:deep(.popup-dialog) {
  width: 600rpx;
  text-align: center;

  .show-title {
    padding: 60rpx;
    font-size: 38rpx;
    letter-spacing: 2rpx;
    font-weight: bold;
  }

  .nn-inp {
    width: 80%;
    margin-left: 10%;
    border: 1rpx solid #f4f4f4;
    padding: 20rpx;
  }

  .nn-btns {
    margin-top: 60rpx;
    display: flex;
    border-top: 1rpx solid #f4f4f4;

    .nn-btn {
      line-height: 1;
      padding: 30rpx;
      width: 50%;
      cursor: pointer;
    }

    .cancel {
      border-right: 1rpx solid #f4f4f4;
    }

    .confirm {
      color: var(--subject_color);
    }
  }
}
</style>
